<template>
  <div class='content_wrap'>
    <Header />

    <div class='content'>
      <el-tabs tab-position="left" style="height: 200px;" @tab-click="handleClick" v-model="hotwork">
        <el-tab-pane label="情况通报" name="hotwork">
          <div style='height:500px;border:1px dotted #ddd; padding-right:15px;'>
            <div style="margin-top:10px;margin-left:20px;">
              <div v-for="e in bulletinList" :key="e.id" class="">
                <div class='wrap_a' style="margin-top:10px;">
                  <nuxt-link  :to="'/detail/?title='+e.title  +'&id='+e.id" class="item_hot">
                    <span> <span style='color:red;'>◆ </span> {{e.title | spliceString }} </span>
                    <span style='color:rgb(152, 150, 150);'>{{e.createdAt}} </span>
                  </nuxt-link>
                </div>
              </div>
            </div>
            <div style='margin-top:50px;text-align:right;font-size:14px;'>
              <span v-for="(e,i) in paginList" :key="e+i" @click="clickpagnation(i,'hotwork')" :class="{span_pag:true,active:i == currentPag}">{{e}}</span>
              <span>
                跳转到
              </span>
              <input style='width:20px; text-align: center;' v-model="jumpNum" @keyup.enter="inputJump('hotwork')" />
              页
            </div>
            <!-- <el-pagination @size-change="handleSizeChange" @current-change="hotworkCurrent" :current-page.sync="hotworkInfo.pageNum" :page-size="hotworkInfo.pageSize" layout="total, prev, pager, next" :total="hotworktotal">
          </el-pagination> -->
          </div>
        </el-tab-pane>
        <el-tab-pane label="热线月报" name="notice">
          <div style='height:500px;border:1px dotted #ddd; padding-right:15px;'>
            <div style="margin-top:10px;margin-left:20px;">
              <div v-for="e in reportList" :key="e.id" class="">
                <div class='wrap_a' style="margin-top:10px;">
                  <nuxt-link  :to="'/detail/?title='+e.title  +'&id='+e.id" class="item_hot">
                    <span> <span style='color:red;'>◆ </span> {{e.title | spliceString }} </span>
                    <span style='color:rgb(152, 150, 150);'>{{e.createdAt}} </span>
                  </nuxt-link>
                </div>
              </div>
            </div>
            <div style='margin-top:50px;text-align:right;font-size:14px;'>
              <span v-for="(e,i) in paginList" :key="e+i" @click="clickpagnation(i,'notice')" :class="{span_pag:true,active:i == currentPag}">{{e}}</span>
              <span>
                跳转到
              </span>
              <input style='width:20px; text-align: center;' v-model="jumpNum" @keyup.enter="inputJump('notice')" />
              页
            </div>
            <!-- <el-pagination @size-change="handleSizeChange" @current-change="hotworkCurrent" :current-page.sync="hotworkInfo.pageNum" :page-size="hotworkInfo.pageSize" layout="total, prev, pager, next" :total="hotworktotal">
          </el-pagination> -->
          </div>
        </el-tab-pane>
        <el-tab-pane label="案件选登" name="case">
          <div style='height:500px;border:1px dotted #ddd; padding-right:15px;'>
            <div style="margin-top:10px;margin-left:20px;">
              <div v-for="e in caseList" :key="e.id" class="">
                <div class='wrap_a' style="margin-top:10px;">
                  <nuxt-link  :to="'/detail/?title='+e.title  +'&id='+e.id" class="item_hot">
                    <span> <span style='color:red;'>◆ </span> {{e.title | spliceString }} </span>
                    <span style='color:rgb(152, 150, 150);'>{{e.createdAt}} </span>
                  </nuxt-link>
                </div>
              </div>
            </div>
            <div style='margin-top:50px;text-align:right;font-size:14px;'>
              <span v-for="(e,i) in paginList" :key="e+i" @click="clickpagnation(i,'case')" :class="{span_pag:true,active:i == currentPag}">{{e}}</span>
              <span>
                跳转到
              </span>
              <input style='width:20px; text-align: center;' v-model="jumpNum" @keyup.enter="inputJump('case')" />
              页
            </div>
            <!-- <el-pagination @size-change="handleSizeChange" @current-change="hotworkCurrent" :current-page.sync="hotworkInfo.pageNum" :page-size="hotworkInfo.pageSize" layout="total, prev, pager, next" :total="hotworktotal">
          </el-pagination> -->
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <Footer />
  </div>
</template>
<script>
import { hotworkData, publicNotic } from "@/api/user";
import global from '@/components/global'
import Header from "~/components/Header.vue";
import Footer from "~/components/Footer.vue";
export default {
  components: { Header, Footer },
  data() {
    return {
      hotwork: 'hotwork',
      bulletinList: [], //情报通告
      reportList: [], //热线月报
      caseList: [], //案件选登
      bulletInfo: {
        title: "",
        sourceInfo: "",
        pageNum: 1,
        pageSize: global.pagSize,
        bizType: "briefing"
      },
      bulletTotal: 1,
      reportInfo: {
        title: "",
        sourceInfo: "",
        pageNum: 1,
        pageSize: global.pagSize,
        bizType: "hotMonReport"
      },
      reportTotal: 1,
      //案件选登 
      caseInfo: {
        title: "",
        sourceInfo: "",
        pageNum: 1,
        pageSize: global.pagSize,
        bizType: "caseSelect"
      },
      caseTotal: 1,
      //分页器数组 
      paginList: ['首页', '上一页', '下一页', '尾页'],
      currentPag: null,
      jumpNum: 1 //跳转输入框
    }
  },
  mounted() {
    console.log(this.$route.query);
    // 判断首页跳转过来的参数，实现对应的展示
    if (this.$route.query.id == 1) {
      this.hotwork = 'notice'
      this.handleClick()

    } else if (this.$route.query.id == 2) {
      this.hotwork = 'case'
      this.handleClick()
    } else {
      this.handleClick()
    }

  },
  methods: {
    //点击tab切换
    handleClick() {
      console.log(this.hotwork);
      if (this.hotwork == 'hotwork' && this.bulletinList.length == 0) {
        this.getbulletinList()
      } else if (this.hotwork == 'notice' && this.reportList == 0) {
        console.log(this.hotwork);
        this.getreportList()
      } else if (this.hotwork == 'case' && this.caseList == 0) {
        this.getCaseList()
      }
    },
    // 获取情报通报数据
    async getbulletinList() {
      let res = await hotworkData(
        this.bulletInfo
      );

      if (res && res.code == 0) {
        this.bulletinList = res.data;
        this.bulletTotal = res.totalCount
      }
    },
    //获取月报数据
    async getreportList() {
      let res = await hotworkData(
        this.reportInfo
      );
      console.log(res);
      if (res && res.code == 0) {
        this.reportList = res.data;
        this.reportTotal = res.totalCount
      }
    },
    //获取案件选登数据
    async getCaseList() {
      let res = await hotworkData(
        this.caseInfo
      );
      if (res && res.code == 0) {
        this.caseList = res.data;
        this.caseTotal = res.totalCount
      }
    },
    // 控制分页器的方法
    clickpagnation(i, type) {
      if (i == 0) {
        this.jumpFirst(type)
        this.currentPag = 0
      } else if (i == 1) {
        this.previous(type)
        this.currentPag = 1
      } else if (i == 2) {
        this.currentPag = 2
        this.next(type)
      } else {
        this.currentPag = 3
        this.lastPage(type)
      }
    },
    // 分页器跳转 
    jumpFirst(type) {


      if (type == 'hotwork') {
        console.log(1);

        this.bulletInfo.pageNum = 1
        this.getbulletinList()
      } else if (type == 'notice') {
        console.log(2);

        this.reportInfo.pageNum = 1
        this.getreportList()
      } else {
        this.caseInfo.pageNum = 1
        this.getCaseList()
      }

    },
    next(type) {
      if (type == 'hotwork') {
        this.bulletInfo.pageNum += 1
        this.getbulletinList()
      } else if (type == 'notice') {
        this.reportInfo.pageNum += 1
        this.getreportList()
      } else {
        this.caseInfo.pageNum += 1
        this.getCaseList()
      }

    },
    previous(type) {
      if (type == 'hotwork') {
        if (this.bulletInfo.pageNum == 1) {
          return false
        } else {
          this.bulletInfo.pageNum -= 1
          this.getbulletinList()
        }
      } else if (type == 'notice') {
        if (this.reportInfo.pageNum == 1) {
          return false
        } else {
          this.reportInfo.pageNum -= 1
          this.getreportList()
        }
      } else {
        if (this.caseInfo.pageNum == 1) {
          return false
        } else {
          this.caseInfo.pageNum -= 1
          this.getCaseList()
        }
      }

    },
    lastPage(type) {
      if (type == 'hotwork') {
        let lastnum
        if (+this.bulletTotal / +this.bulletInfo.pageSize == 0) {
          lastnum = +this.bulletTotal / +this.bulletInfo.pageSize
        } else {
          lastnum = (+this.bulletTotal / +this.bulletInfo.pageSize) + 1
        }
        this.bulletInfo.pageNum = lastnum
        this.getbulletinList()
      } else if (type == 'notice') {
        let lastnum
        if (+this.reportTotal / +this.reportInfo.pageSize == 0) {
          lastnum = +this.reportTotal / +this.reportInfo.pageSize
        } else {
          lastnum = (+this.reportTotal / +this.reportInfo.pageSize) + 1
        }
        this.reportInfo.pageNum = lastnum
        this.getreportList()
      } else {
        let lastnum
        if (+this.caseTotal / +this.caseInfo.pageSize == 0) {
          lastnum = +this.caseTotal / +this.caseInfo.pageSize
        } else {
          lastnum = (+this.caseTotal / +this.caseInfo.pageSize) + 1
        }
        this.caseInfo.pageNum = lastnum
        this.getCaseList()
      }


    },
    inputJump(type) {
      if (type == 'hotwork') {
        if (this.jumpNum >= 1) {
          this.bulletInfo.pageNum = this.jumpNum
          this.getbulletinList()

        }
      } else if (type == 'notice') {
        if (this.jumpNum >= 1) {
          this.reportInfo.pageNum = this.jumpNum
          this.getreportList()

        }
      } else {
        if (this.jumpNum >= 1) {
          this.caseInfo.pageNum = this.jumpNum
          this.getCaseList()

        }
      }

    }
  },
  head() {
    return {
      title: '12345概况-吉安12345政府服务热线',
      meta: [
        { hid: '吉安12345政府服务热线', name: '吉安12345政府服务热线', content: '吉安12345政府服务热线' }
      ],
    }
  }
}
</script>
<style scoped lang="scss">
.content_wrap {
  width: 100%;
  margin: 0 auto;
  .content {
    width: 1200px;
    margin: 20px auto;
  }
}

.el-tabs--left {
  height: 100% !important;
  /* height: 520px !important; */
}
.item_hot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px dashed #999;
  padding-bottom: 10px;
}
.wrap_a {
  margin: 10px 0;
}
.span_pag {
  padding-right: 5px;
}
.active {
  background-color: #f32424;
  color: #fff;
}
</style>
